<template>
  <div class="screen-table">
    <div class="screen-table-list">
      <div class="head">
        <div class="head-all">
          <span class="hd-1">x区</span>
          <span class="hd-2">xx总数</span>
          <span class="hd-3">xx总数</span>
          <span class="hd-4">xx总数</span>
        </div>
        <div class="head-all">
          <span class="hd-1">x区</span>
          <span class="hd-2">xx总数</span>
          <span class="hd-3">xx总数</span>
          <span class="hd-4">xx总数</span>
        </div>
      </div>
      <el-scrollbar class="main-scroll">
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
        <div class="main">
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
          <div class="main-all">
            <span class="txt">x区</span>
            <span class="txt">11</span>
            <span class="txt">233</span>
            <span class="txt">444</span>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.screen-table {
  padding: 10px;
  width: 100%;
  height: 100%;
  .screen-table-list {
    width: 100%;
    height: 100%;
    .head {
      width: 100%;
      height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #4282bb;
      .head-all {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        span {
          width: 25%;
          text-align: center;
          font-size: 14px;
          color: #fff;
        }
      }
    }
    .main-scroll {
      width: 100%;
      height: 232px;
      overflow: hidden;
    }
    .main {
      width: 100%;
      height: 33px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #4d6678;
      .main-all {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .txt {
          width: 25%;
          text-align: center;
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }
}
</style>
